<template>
	<div>
		<!-- 添加分类 -->
		<el-button>添加分类</el-button>
		<!-- 表格 -->
		<el-table :data="tableData" row-key="cat_id" style="width: 100%">
			<el-table-column type="index">
				<template v-slot="{ row }">
					{{ row.index }}
				</template>
			</el-table-column>
			<el-table-column label="分类名称">
				<template slot-scope="{ row }">
					<i
						@click="row.icon = !row.icon"
						style="cursor: pointer"
						:class="{
							'el-icon-circle-plus-outline': !row.icon,
							'el-icon-remove-outline': row.icon,
						}"
					></i>
					{{ row.cat_name }}
				</template>
			</el-table-column>

			<el-table-column label="是否有效">
				<template slot-scope="{ row }">
					<i
						class="el-icon-success"
						:style="{
							color: row.deleted ? 'red' : 'green',
						}"
					></i>
				</template>
			</el-table-column>

			<el-table-column label="排序">
				<template slot-scope="{ row }">
					<el-tag
						:type="
							row.cat_level === 0
								? 'primary'
								: row.cat_level === 1
								? 'success'
								: row.cat_level === 2
								? 'danger'
								: ''
						"
					>
						{{ row.cat_level | level }}
					</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="操作">
				<template>
					<el-button type="primary">编辑</el-button>
					<el-button type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
	</div>
</template>

<script>
import { getGoodsClasses } from '@/api/goods'
export default {
	data() {
		return {
			tableData: [],
			pagenum: 1,
			pagesize: 5,
			total: 0,
		}
	},
	filters: {
		level(name) {
			var dict = {
				0: '一级',
				1: '二级',
				2: '三级',
			}
			return dict[name]
		},
	},
	mounted() {
		getGoodsClasses({
			type: 3,
			pagesize: this.pagesize,
			pagenum: this.pagenum,
		}).then((res) => {
			var { total, result } = res.data.data
			this.total = total
			this.tableData = this.addState(result)
		})
	},
	methods: {
		// 递归添加数据状态
		addState(data) {
			data.forEach((item, i, o) => {
				o[i].icon = false
				// 加一个序号
				if (item.cat_level === 0) {
					o[i].index = i + 1
				}
				if (item.children && item.children.length) {
					this.addState(item.children)
				}
			})
			return data
		},
	},
}
</script>

<style>
</style>